<!--Lab2新增-全部商店界面/主页-->
<script setup lang="ts">
import {storeInfo} from "../../api/store.ts";
import StoreItem from "../../components/StoreItem.vue"
import {ref} from 'vue'
import {router} from "../../router";
import CreateStore from "../../components/CreateStore.vue";
import CreateCoupon from "../../components/CreateCoupon.vue";

const storeList = ref<any[]>([])
const openDialog = ref(false)
const openCouponDialog = ref(false)
const role = sessionStorage.getItem("role")

storeInfo().then(res =>{
  storeList.value = res.data.result
})

const toDetails = (id : number) => {
  router.push({ name: 'storeDetail', params: { storeId: id } });
}
</script>


<template>
  <el-form-item v-if = "role == 'MANAGER'">
    <el-button @click="openDialog = true">创建商店</el-button>
    <el-dialog v-model = "openDialog" title = "创建商店" width = "600">
      <CreateStore></CreateStore>
    </el-dialog>
  </el-form-item>

  <el-form-item v-if = "role == 'CEO'">
    <el-button @click="openCouponDialog = true">发布优惠券</el-button>
    <el-dialog v-model = "openCouponDialog" title = "创建商店" width = "600">
      <CreateCoupon :role = "role"></CreateCoupon>
    </el-dialog>
  </el-form-item>

  <div class="store-list">
    <StoreItem v-for = "store in storeList" :id = "store.id" class="store-item" @click = "toDetails(store.id)"></StoreItem>
  </div>
</template>


<style scoped>
.store-list {
  display: flex;
  padding: 2px;
  flex-flow: wrap;
  justify-content: center;
  align-content: start;
}

.store-item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.store-item:nth-child(3n) {
  margin-right: 0;
}


</style>